<template>
  <uv-button 
    class="ai-button" 
    :type="type" 
    :size="size"
    :custom-style="customStyle"
    @click="handleClick"
  >
    {{ text }}
  </uv-button>
</template>

<script>
export default {
  name: 'AiButton',
  props: {
    text: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: 'normal',
    },
    type: {
      type: String,
      default: 'primary',
    }
  },
  computed: {
    customStyle() {
      return {
        backgroundColor: '#F8F9FA',
        borderColor: '#F8F9FA',
        color: '#495057',
        borderRadius: '16rpx',
        fontSize: '24rpx',
        padding: '8rpx 16rpx'
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-button {
  margin-right: 16rpx;
  margin-bottom: 8rpx;
}
</style>
